<template>
  <div ref="chartContainer" class="radar-chart"></div>
</template>

<script>
// 按需导入 ECharts 模块
import * as echarts from 'echarts/core';
import { RadarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  RadarChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  CanvasRenderer
]);

export default {
  name: 'RadarChart',
  props: {
    // 可以接收自定义数据
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.resizeChart);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.resizeChart);
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  methods: {
    initChart() {
      // 初始化图表
      this.chart = echarts.init(this.$refs.chartContainer);
      
      // 设置图表配置
      const option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'item'
        },
        radar: {
          // 形状： 'circle'(圆形), 'polygon'(多边形)
          shape: 'polygon',
          // 雷达图每个轴的配置
          indicator: [
            { name: '学历', max: 100 },
            { name: '经验', max: 100 },
            { name: '技能', max: 100 },
            { name: '职位', max: 100 },
            { name: '年龄', max: 100 }
          ],
          // 分割线样式
          splitLine: {
            lineStyle: {
              color: '#dededf'
            }
          },
          // 轴线样式
          axisLine: {
            lineStyle: {
              color: '#dededf'
            }
          },
          // 网格样式
          splitArea: {
            areaStyle: {
              color: ['rgba(255, 255, 255, 1)']
            }
          },
          // 文字样式
          name: {
            textStyle: {
              color: '#707275',
              fontSize: 12,
              fontWeight: 'normal',
              lineHeight: 16
            }
          }
        },
        series: [{
          name: '匹配度',
          type: 'radar',
          // 填充区域透明度
          areaStyle: {
            opacity: 0.6
          },
          // 数据点标记
          symbol: 'circle',
          symbolSize: 0,
          // 数据值
          data: [
            {
              value: [90, 70, 80, 60, 70],
              name: '简历匹配度',
              // 数据点颜色
              itemStyle: {
                color: '#0768FA'
              },
              // 区域填充颜色
              areaStyle: {
                color: "rgba(7, 104, 250, 0.25)"
              },
              // 线条样式
              lineStyle: {
                width: 2,
                color: '#0768FA'
              }
            }
          ]
        }]
      };
      
      // 设置配置项并渲染图表
      this.chart.setOption(option);
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(newVal) {
        if (this.chart && newVal) {
          this.chart.setOption(newVal);
        }
      }
    }
  }
};
</script>

<style scoped>
.radar-chart {
  width: 100%;
  height: 100%;
}
</style>